<template>
  <div class="header">
    <div class="f-nav">
      <!-- <FirstNav/> -->
    <div class="nav-i-b" :class="{ 'nav-i-b-f': !show }" @click="hideSecond">
      <svg-icon className="nav-icon" icon-class="caidan_shousuo" />
    </div>
    </div>
    <div class="position">
      当前位置：<span class="path">{{meta.bt}}</span>
    </div>
    <div class="h-r">
      <div class="user h-r-fh-r-f" v-if="userName">
        <a class="h-r-t" href="javascript:;">{{ userName }}</a>
      </div>
      <div class="login-out h-r-f" @click="handleLoginOut">
        <svg-icon className="close-icon" icon-class="close" />
      </div>
    </div>
  </div>
</template>

<script>
// import FirstNav from './firstNav'
import { removeToken } from '@/utils/auth'
import { mapState } from 'vuex'
export default {
  components: {
  },
  props: ['show'],
  data() {
    const userName = localStorage.getItem('USERNAME')
    return {
      userinfo: {},
      userName: userName
    }
  },
  mounted() {},
  computed: {
    ...mapState({
        meta: state => state.breadCrunbData
      }),
  },
  methods: {
    hideSecond() {
      this.$emit('hideSecond')
    },
    loginOut() {
      this.$router.push('/login')
      removeToken()
    },
    handleLoginOut() {
      this.$confirm('当前已登录，确认退出？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
     
          this.loginOut()
        })
        .catch(() => {
          console.log('cancel')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import './scss/header';
.nav-i-b {
    width: 20px;
    height: 64px;
    line-height: 64px;
    cursor: pointer;
    z-index: 1;
    transition: 0.3s;
    margin-right: 11px;
  }
  .nav-i-b-f {
    .nav-icon {
      transform: rotate(0deg);
    }
  }
  .nav-icon {
    transition: all 0.1s;
    transform: rotate(180deg);
    font-size: 20px;
  }
.title {
  color: #333333;
  font-weight: bold;
  font-size: 20px;
}
.position {
  height: 64px;
  line-height: 64px;
  color: #999999;
  .path {
    color: #333;
  }
}
a {
  color: #333333;
}
.logo {
  width: 190px;
  display: flex;
  justify-content: center;
  // &::after {
  //   content: '';
  //   position: absolute;
  //   top: 50%;
  //   right: 0;
  //   transform: translateY(-50%);
  //   width: 1px;
  //   height: 18px;
  //   background-color: #d4d4d4;
  // }
  .list-icon {
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    &:hover {
      color: #3296fa;
    }
  }
  .pic {
    margin: 0;
    width: 49px;
    height: 49px;
    margin-right: 11px;
  }
}
.f-nav {
  float: left;
  margin-left: 28px;
}
.h-r {
  // .search-icon {
  //   font-size: 19px;
  //   margin-right: 2px;
  //   font-weight: bold;
  // }
  // .search-val {
  //   font-size: 14px;
  //   line-height: 20px;
  //   height: 20px;
  //   border: none;
  //   border-bottom: 1px solid #fff;
  //   background: none;
  //   color: #fff;
  //   width: 164px;
  //   padding: 0;
  //   &::-webkit-input-placeholder{
  //     color: #a1a1a1;
  //   }
  // }
  .user {
    .user-action {
      transform: translateX(0%);
      position: absolute;
      top: 72px;
      right: -50px;
      left: auto;
    }
  }
}
</style>
